<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    :show-close="false"
    :close-on-click-modal="false"
  >
    <el-form :model="form" :rules="rules" ref="form">
      <el-form-item label="部门名称" label-width="120px" prop="name">
        <el-input
          v-model="form.name"
          placeholder="1-10个字符"
          width="80%"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="部门编码" label-width="120px" prop="code">
        <el-input
          v-model="form.code"
          placeholder="1-10个字符"
          width="80%"
        ></el-input>
      </el-form-item>
      <el-form-item label="部门负责人" label-width="120px" prop="manager">
        <el-input
          v-model="form.manager"
          placeholder="1-10个字符"
          width="80%"
        ></el-input>
      </el-form-item>
      <el-form-item label="部门介绍" label-width="120px" prop="introduce">
        <el-input
          type="textarea"
          v-model="form.introduce"
          placeholder="1-200个字符"
          width="80%"
          rows="4"
        ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="addDepart()">{{btn}}</el-button>
      <el-button @click="closeDialog()">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    var validateName = async (rule, value, callback) => {
      let result = await this.$api.department.getDepartments();
      if (result.depts.some((item) => item.name == value)) {
        callback(new Error("部门名称已存在"));
      } else {
        callback();
      }
    };
    var validateCode = async (rule, value, callback) => {
      let result = await this.$api.department.getDepartments();
      if (result.depts.some((item) => item.code == value)) {
        callback(new Error("部门编号已存在"));
      } else {
        callback();
      }
    };

    return {
      form: {
        name: "",
        manager: "",
        code: "",
        introduce: "",
      },
      rules: {
        name: [
          { required: true, message: "部门名称不能为空", trigger: "blur" },
          {
            min: 1,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },
          { validator: validateName, trigger: "blur" },
        ],
        manager: [
          { required: true, message: "部门负责人不能为空", trigger: "blur" },
          {
            min: 1,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },
        ],
        code: [
          { required: true, message: "部门编码不能为空", trigger: "blur" },
          {
            min: 1,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },
          { validator: validateCode, trigger: "blur" },
        ],
        introduce: [
          {
            max: 200,
            message: "长度在 200 个字符内",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {
    this.$bus.$on("setForm", (form) => {
      this.form = form;
      this.rules = {
        name: [
          { required: true, message: "部门名称不能为空", trigger: "blur" },
          {
            min: 1,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },
        ],
        manager: [
          { required: true, message: "部门负责人不能为空", trigger: "blur" },
          {
            min: 1,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },
        ],
        code: [
          { required: true, message: "部门编码不能为空", trigger: "blur" },
          {
            min: 1,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },
        ],
        introduce: [
          {
            max: 200,
            message: "长度在 200 个字符内",
            trigger: "blur",
          },
        ],
      };
    });
  },
  computed: {
    //表单打开状态
    dialogFormVisible() {
      return this.$store.state.depart.dialogFormVisible;
    },
    title(){
      return this.form.id?'修改部门':'添加部门'
    },
    btn(){
      return this.form.id?'修 改':'添 加'
    },

  },
  methods: {
    //关闭表单
    closeDialog() {
      this.$store.commit("depart/SET_DialogFormVisible");
      this.$nextTick(() => {
        this.$refs["form"].clearValidate();
      });
    },

    //添加部门
    addDepart() {
      this.$refs["form"].validate(async (valid) => {
        if (valid) {
          try {
            if (!this.form.id) {
              this.form.pid = this.$store.state.depart.departId;
              await this.$api.department.addDepartment(this.form);
              this.$message.success("添加成功");
            }else{
              await this.$api.department.setDepartmentById(this.form.id,this.form);
              this.$message.success("修改成功");
            }
            this.$emit("getDepartments");
            this.closeDialog();
          } catch (error) {}
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style>
</style>